<template>
  <div style="margin: 20px">
    <vxe-button status="primary" title="Add" size="mini" @click="addlist"
      >Add</vxe-button
    >
    <vxe-button title="Remove" size="mini" @click="removeSelected"
      >Remove</vxe-button
    >
    <vxe-button status="primary" title="Add" size="mini" @click="findList"
      >模拟</vxe-button
    >
    <vxe-grid ref="xGrid" v-bind="gridOptions" @page-change="handlePageChange">
      <template #operate="{ row }">
        <template v-if="$refs.xGrid.isActiveByRow(row)">
          <vxe-button
            status="primary"
            title="Save"
            size="mini"
            @click="saveRowEvent(row)"
            >Save</vxe-button
          >
        </template>
        <template v-else>
          <vxe-button title="Edit" size="mini" @click="editRowEvent(row)"
            >Edit</vxe-button
          >
        </template>
        <vxe-button title="Remove" size="mini" @click="removeRowEvent(row)"
          >Remove</vxe-button
        >
      </template>

      <template #In_SKU="{ row }">
        <vxe-input v-model="row.In_SKU"></vxe-input>
      </template>
      <template #In_UNIT="{ row }">
        <vxe-input v-model="row.In_UNIT"></vxe-input>
      </template>
      <template #In_batch="{ row }">
        <vxe-input v-model="row.In_batch"></vxe-input>
      </template>
      <template #In_Prod_date="{ row }">
        <DatePicker
          type="date"
          v-model="row.In_Prod_date"
          format="yyyy-MM-dd"
          split-panels
          placeholder="Select date"
          @on-change="dateChange($event, row, 'In_Prod_date')"
          transfer
        ></DatePicker>
      </template>
      <template #In_Exp_date="{ row }">
        <DatePicker
          type="date"
          v-model="row.In_Exp_date"
          format="yyyy-MM-dd"
          split-panels
          placeholder="Select date"
          @on-change="dateChange($event, row, 'In_Exp_date')"
          transfer
        ></DatePicker>
      </template>
      <template #In_MfgID="{ row }">
        <vxe-input v-model="row.In_MfgID"></vxe-input>
      </template>
      <template #In_GRDATE_LOT="{ row }">
        <vxe-input v-model="row.In_GRDATE_LOT"></vxe-input>
      </template>
      <template #In_QTY="{ row }">
        <vxe-input v-model="row.In_QTY"></vxe-input>
      </template>
      <template #In_Note="{ row }">
        <vxe-input v-model="row.In_Note"></vxe-input>
      </template>

      <template #Out_SKU="{ row }">
        <vxe-input v-model="row.Out_SKU"></vxe-input>
      </template>
      <template #Out_UNIT="{ row }">
        <vxe-input v-model="row.Out_UNIT"></vxe-input>
      </template>
      <template #Out_batch="{ row }">
        <vxe-input v-model="row.Out_batch"></vxe-input>
      </template>
      <template #Out_Prod_date="{ row }">
        <DatePicker
          type="date"
          v-model="row.Out_Prod_date"
          format="yyyy-MM-dd"
          split-panels
          placeholder="Select date"
          @on-change="dateChange($event, row, 'Out_Prod_date')"
          transfer
        ></DatePicker>
      </template>
      <template #Out_Exp_date="{ row }">
        <DatePicker
          type="date"
          v-model="row.Out_Exp_date"
          format="yyyy-MM-dd"
          split-panels
          placeholder="Select date"
          @on-change="dateChange($event, row, 'Out_Exp_date')"
          transfer
        ></DatePicker>
      </template>
      <template #Out_MfgID="{ row }">
        <vxe-input v-model="row.Out_MfgID"></vxe-input>
      </template>
      <template #Out_GRDATE_LOT="{ row }">
        <vxe-input v-model="row.Out_GRDATE_LOT"></vxe-input>
      </template>
      <template #Out_QTY="{ row }">
        <vxe-input v-model="row.Out_QTY"></vxe-input>
      </template>
      <template #Out_Note="{ row }">
        <vxe-input v-model="row.Out_Note"></vxe-input>
      </template>
    </vxe-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
        border: true,
        resizable: true,
        keepSource: true,
        showOverflow: true,
        loading: false,
        pagerConfig: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 50, 100, 200, 500],
        },
        editConfig: {
          // 设置触发编辑为手动模式
          trigger: "manual",
          // 设置为整行编辑模式
          mode: "row",
          // 显示修改状态和新增状态
          showStatus: true,
          icon: "a",
          autoClear: false,
        },
        columns: [
          { type: "checkbox", width: 30 },
          {
            title: "Return In",
            children: [
              {
                field: "In_SKU",
                title: "SKU",
                slots: { edit: "In_SKU" },
                editRender: {},
              },
              {
                field: "In_UNIT",
                title: "UNIT",
                slots: { edit: "In_UNIT" },
                editRender: {},
              },
              {
                field: "In_batch",
                title: "batch",
                slots: { edit: "In_batch" },
                editRender: {},
              },
              {
                field: "In_Prod_date",
                title: "Prod date",
                width: 100,
                slots: { edit: "In_Prod_date" },
                editRender: {},
              },
              {
                field: "In_Exp_date",
                title: "Exp date",
                width: 100,
                slots: { edit: "In_Exp_date" },
                editRender: {},
              },
              {
                field: "In_MfgID",
                title: "MfgID",
                slots: { edit: "In_MfgID" },
                editRender: {},
              },
              {
                field: "In_GRDATE_LOT",
                title: "GRADTE_LOT",
                slots: { edit: "In_GRDATE_LOT" },
                editRender: {},
              },
              {
                field: "In_QTY",
                title: "QTY",
                slots: { edit: "In_QTY" },
                editRender: {},
              },
              {
                field: "In_Note",
                title: "Note",
                slots: { edit: "In_Note" },
                editRender: {},
              },
            ],
          },
          {
            title: "Repack Out",
            children: [
              {
                field: "Out_SKU",
                title: "SKU",
                slots: { edit: "Out_SKU" },
                editRender: {},
              },
              {
                field: "Out_UNIT",
                title: "UNIT",
                slots: { edit: "Out_UNIT" },
                editRender: {},
              },
              {
                field: "Out_batch",
                title: "batch",
                slots: { edit: "Out_batch" },
                editRender: {},
              },
              {
                field: "Out_Prod_date",
                title: "Prod date",
                width: 100,
                slots: { edit: "Out_Prod_date" },
                editRender: {},
              },
              {
                field: "Out_Exp_date",
                title: "Exp date",
                width: 100,
                slots: { edit: "Out_Exp_date" },
                editRender: {},
              },
              {
                field: "Out_MfgID",
                title: "MfgID",
                slots: { edit: "Out_MfgID" },
                editRender: {},
              },
              {
                field: "Out_GRDATE_LOT",
                title: "GRADTE_LOT",
                slots: { edit: "Out_GRDATE_LOT" },
                editRender: {},
              },
              {
                field: "Out_QTY",
                title: "QTY",
                slots: { edit: "Out_QTY" },
                editRender: {},
              },
              {
                field: "Out_Note",
                title: "Note",
                slots: { edit: "Out_Note" },
                editRender: {},
              },
            ],
          },
          {
            title: "operation",
            width: 180,
            slots: { default: "operate", edit: "operate" },
          },
        ],
        data: [],
        "edit-rules": {
          In_SKU: [
            { required: true, message: "msg_notice_98", trigger: "blur" },
            {
              trigger: "blur",
              pattern: /^[0-9a-zA-Z]+$/,
              message: "msg_notice_111",
            },
          ],
          In_UNIT: [
            {
              required: true,
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          In_batch: [
            {
              required: true,
              type: "number",
              message: "msg_notice_880",
              trigger: "blur",
            },
          ],
          In_MfgID: [
            {
              required: true,
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          In_GRDATE_LOT: [
            {
              required: true,
              type: "number",
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          In_Exp_date: [
            { required: true, message: "msg_notice_98", trigger: "blur" },
          ],
          In_Prod_date: [
            { required: true, message: "msg_notice_98", trigger: "blur" },
          ],
          In_QTY: [
            {
              required: true,
              message: "msg_notice_224",
              trigger: "blur",
            },
          ],
          Out_SKU: [
            { required: true, message: "msg_notice_98", trigger: "blur" },
            {
              trigger: "blur",
              pattern: /^[0-9a-zA-Z]+$/,
              message: "msg_notice_111",
            },
          ],
          Out_UNIT: [
            {
              required: true,
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          Out_batch: [
            {
              required: true,
              type: "number",
              message: "msg_notice_880",
              trigger: "blur",
            },
          ],
          Out_MfgID: [
            {
              required: true,
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          Out_GRDATE_LOT: [
            {
              required: true,
              type: "number",
              message: "msg_notice_98",
              trigger: "blur",
            },
          ],
          Out_Exp_date: [{ required: true, message: "msg_notice_98" }],
          Out_Prod_date: [{ required: true, message: "msg_notice_98" }],
          Out_QTY: [
            {
              required: true,
              message: "msg_notice_224",
              trigger: "blur",
            },
          ],
        },
      },
    };
  },
  methods: {
    dateChange(data, row, name) {
      row[name] = data;
    },
    createId() {
      return Date.now() + "_" + parseInt(Math.random() * 99999999);
    },
    addlist() {
      const getActiveRecord = this.$refs.xGrid.getActiveRecord();
      if (getActiveRecord) {
        return;
      }
      this.gridOptions.data.push({
        id: null,
        In_SKU: "",
        In_UNIT: "",
        In_batch: "",
        In_Prod_date: null,
        In_Exp_date: null,
        In_MfgID: "",
        In_GRDATE_LOT: "",
        In_QTY: "",
        In_Note: "",

        Out_SKU: "",
        Out_UNIT: "",
        Out_batch: "",
        Out_Prod_date: null,
        Out_Exp_date: null,
        Out_MfgID: "",
        Out_GRDATE_LOT: "",
        Out_QTY: "",
        Out_Note: "",
      });
      this.$refs.xGrid.setActiveRow(
        this.gridOptions.data[this.gridOptions.data.length - 1]
      );
    },
    removeSelected() {
      const $grid = this.$refs.xGrid;
      $grid.removeCheckboxRow();
      this.gridOptions.data = $grid.getTableData().fullData;
    },
    findList() {
      this.gridOptions.loading = true;
      setTimeout(() => {
        this.gridOptions.loading = false;
        this.gridOptions.pagerConfig.total = 10;
        this.gridOptions.data.push({
          id: this.createId(),
          In_SKU: "1",
          In_UNIT: 2,
          In_batch: 2,
          In_Prod_date: "2022-01-01",
          In_Exp_date: "2022-01-01",
          In_MfgID: 4,
          In_GRDATE_LOT: 45,
          In_QTY: 1,
          In_Note: 2,

          Out_SKU: "1",
          Out_UNIT: 2,
          Out_batch: 2,
          Out_Prod_date: "2022-01-01",
          Out_Exp_date: "2022-01-01",
          Out_MfgID: 4,
          Out_GRDATE_LOT: 45,
          Out_QTY: 1,
          Out_Note: 2,
        });

        console.log(this.gridOptions.data);
      }, 300);
    },
    handlePageChange({ currentPage, pageSize }) {
      this.gridOptions.pagerConfig.currentPage = currentPage;
      this.gridOptions.pagerConfig.pageSize = pageSize;
      this.findList();
    },
    editRowEvent(row) {
      console.log(row.id);
      this.$refs.xGrid.setActiveRow(row);
    },
    saveRowEvent(row) {
      row.id = row.id || this.createId();
      const $grid = this.$refs.xGrid;
      $grid.fullValidate(true, (err) => {
        console.log(err);
        if (err) return;
        $grid.clearActived().then(() => {
          this.gridOptions.loading = true;
          setTimeout(() => {
            this.gridOptions.loading = false;
            this.$XModal.message({ content: "success！", status: "success" });
          }, 300);
        });
      });
    },
    async removeRowEvent(row) {
      const type = await this.$XModal.confirm("delete?");
      const $grid = this.$refs.xGrid;
      if (type === "confirm") {
        $grid.remove(row);
        this.gridOptions.data = $grid.getTableData().fullData;
      }
    },
  },
};
</script>

<style></style>
